import React from 'react';
import {Modal, Button, Typography} from 'antd';
import {MoneyCollectOutlined} from '@ant-design/icons';
import styles from './styles/index.module.less';
import {ICashModalInfo} from "@/components/OrderPaymentModal/types";

const {Title, Text} = Typography;


interface CashPaymentProps {
  visible: boolean;
  amount: number;
  loading: boolean;
  onOk: () => void;
  onCancel: () => void;
  info?: ICashModalInfo
}

const CashPayment: React.FC<CashPaymentProps> = ({
                                                   visible,
                                                   amount,
                                                   loading,
                                                   onOk,
                                                   onCancel,
                                                   info
                                                 }) => {
  return (
    <Modal
      title={info?.title || '现金支付'}
      visible={visible}
      onOk={onOk}
      onCancel={onCancel}
      afterClose={onCancel}
      zIndex={2000}
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
        <Button
          key="submit"
          type="primary"
          loading={loading}
          onClick={onOk}
          icon={<MoneyCollectOutlined/>}
        >
          确认收款
        </Button>,
      ]}
      className={styles.cashPayment}
    >
      <div className={styles.cashContent}>
        <Title level={4} className={styles.cashTitle}>
          {info?.tip || '请收取客户现金'}
        </Title>
        <Text strong className={styles.cashAmount}>
          应收金额: <span className={styles.amount}>¥{amount.toFixed(2)}</span>
        </Text>
        <div className={styles.cashTips}>
          <Text type="secondary">
            {
              info?.tipFooter ??
              (<p><span>请当面点清现金，确认金额无误后点击</span>
                <span style={{fontWeight: 'bold'}}>确认收款</span></p>)
            }
          </Text>
        </div>
      </div>
    </Modal>
  );
};

export default CashPayment;
